<template>
  <div class="mask" v-if="visible">
    <div class="mask-item" @click="close"></div>
    <div class="nso">
      <div class="nso-title">{{ name }}</div>
      <div class="nso-line">
        <img src="@/assets/images/popup/1.png" alt="" />
      </div>
      <div class="nso-content">
        <div class="nso-content-c">
          <div
            class="nso-content-c-teble"
            ref="scrollContainer"
            @scroll="handleScroll"
          >
            <table>
              <thead>
                <tr>
                  <td v-for="item in columns" :key="item.key">
                    {{ item.label }}
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="it in list" :key="it.sorgInfoId">
                  <td v-for="item in columns" :key="item.key">
                    <el-tooltip class="box-item" effect="dark" placement="top">
                      <template #content>
                        <div>
                          {{
                            item?.customRender
                              ? item.customRender(it[item.key], it)
                              : it[item.key]
                              ? it[item.key]
                              : '--'
                          }}
                        </div>
                      </template>
                      <span>
                        {{
                          item?.customRender
                            ? item.customRender(it[item.key], it)
                            : it[item.key]
                            ? it[item.key]
                            : '--'
                        }}</span
                      >
                    </el-tooltip>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { pageCCJC } from '@/api/systemSetting/socialOrganization'
import { useScrollHook } from '@/views/largeScreen/composables/useScrollHook'

const visible = ref(false)

const name = ref('')

const close = () => {
  visible.value = false
}

const requestHttp = ref<(e) => Promise<any>>()

const show = ({ title, query }, http: (e) => Promise<any>) => {
  visible.value = true
  params.value.pageNum = 1
  total.value = 0
  list.value = []
  name.value = title
  params.value = {
    ...params.value,
    ...query
  }
  requestHttp.value = http
  init()
}

const columns = ref([
  {
    key: 'organizationBaseName',
    label: '组织单位'
  },
  {
    key: 'creditCode',
    label: '注册时间'
  },
  {
    key: 'organizationType',
    label: '组织类别',
    customRender: (value) => {
      return value == 1 ? '社团' : '民非'
    }
  },
  {
    key: 'supervisoryUnit',
    label: '主管部门'
  },
  {
    key: 'legalRepresentativeName',
    label: '法定代表人/负责人'
  },
  {
    key: 'supervisoryPhone',
    label: '联系电话'
  }
])

const params = ref<{
  pageNum: number
  pageSize: number
}>({
  pageNum: 1,
  pageSize: 20
})

const total = ref(0)

const list = ref<Record<string, any>>([])

const init = () => {
  if (!requestHttp?.value) return
  requestHttp?.value(params.value).then((res) => {
    if (params.value.pageNum === 1) {
      list.value = res.data.list
    } else {
      list.value = list.value.concat(res.data.list)
    }
    total.value = res.total
  })
}

const { scrollContainer, handleScroll } = useScrollHook(() => {
  if (total.value > list.value.length) {
    params.value.pageNum += 1
    init()
  }
})

defineExpose({ show })
</script>

<style scoped lang="scss">
.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  .mask-item {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 99;
  }
}
.nso {
  width: 14rem;
  height: 8rem;
  position: absolute;
  z-index: 9;
  top: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  background-image: url('@/assets/images/popup/bg.png');
  background-size: 100% 100%;
  z-index: 100;
  .nso-title {
    width: 100%;
    text-align: center;
    font-size: 0.3rem;
    height: 0.635rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 0.27rem;
    color: #ffffff;
  }
  .nso-line {
    width: 100%;
    height: 3px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nso-content {
    width: 100%;
    height: calc(100% - 0.835rem);
    margin-top: 4px;
    .nso-content-c {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 0.208rem 0.291rem;
    }
  }
}
.nso-content-c-teble {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 8px;
  }
  table {
    border: 2px double #3486da; /* 外边框的双边框样式 */
  }
  th,
  td {
    //border: 1px solid #3486da;
    //padding: 1px;
    border: 1px solid #2669c0;
    padding: 0.125rem 0.1rem;
    box-sizing: border-box;
  }
  thead {
    background: rgba(52, 134, 218, 0.2);
  }
  th,
  td {
    min-height: 0.458rem;
    text-align: center;
    font-size: 0.1875rem;
    color: #b8bbcf;
  }
  td {
    font-size: 0.1475rem;
  }
  th {
    background: rgba(52, 134, 218, 0.8) !important;
  }
}
.nso-content-c-teble::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
</style>
